<template>
  <div class="roomUpdate">
    <Breadcrumb :pathContent="content" />
    <el-form>
      <el-form-item>
        <div class="roomUpdate-content">
          <el-tabs v-model="activeName">
            <el-tab-pane label="基础信息" name="first" ><RoomInfo :room="room" :hotelName="hotelName" :hotelEnName="hotelEnName"/></el-tab-pane>
            <el-tab-pane label="基础设施" name="second">
              <RoomFacilities :roomFacilities="roomFacilities" />
            </el-tab-pane>
            <el-tab-pane label="房型图片" name="third">
              <RoomPicture :roomPictures="roomPictures" />
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import RoomPicture from '@/components/room/roomUpdate/RoomPicture.vue' // 房型图片
import RoomFacilities from '@/components/room/roomUpdate/roomFacilities.vue' // 房型基础设施
import { getRoomInfo } from '@/public/js/room.js'
const RoomInfo = () => import('@/components/room/roomUpdate/roomInfo.vue')
export default {
  components: {
    RoomInfo,
    RoomPicture,
    RoomFacilities
  },
  token: '',
  data () {
    return {
      activeName: 'first',
      room: {}, // 房型基础信息
      roomFacilities: {}, // 基础设施
      roomPictures: {}, // 房型图片
      hotelName: '',
      hotelEnName: '',
      content: {
        firstTitle: '酒店管理',
        secondTitle: '房型信息',
        type: 'close'
      },
      isAdd: true // 是否为新增房型
    }
  },
  created () {
    this.getRoomInfoData()
    this.activeName = sessionStorage.getItem('last') ? 'third' : 'first'
    sessionStorage.setItem('isCreate', false)
  },
  methods: {
    // 获取房型所有信息
    getRoomInfoData () {
      let data = {
        'timestamp': 0,
        'version': 'string',
        'operation': 'string',
        'hotelId': this.$route.query.hotelId,
        'roomId': this.$route.query.roomId
      }
      getRoomInfo(data).then(res => {
        console.log('res', res)
        if (!res.data.errCode) {
          // 存储roomID
          sessionStorage.setItem('roomId', res.data.room.id)
          this.room = res.data.room
          this.roomFacilities = res.data.roomFacilities
          this.roomPictures = res.data.roomPictures
          this.hotelName = res.data.hotelName
          this.hotelEnName = res.data.hotelEnName
          let filesData = JSON.parse(sessionStorage.getItem('imgsData'))
          if (!filesData) {
            sessionStorage.setItem('imgsData', JSON.stringify(this.roomPictures))
          }
        }
      })
    }
  }
}
</script>
<style lang="scss">
.el-tabs__content{
  margin-top:30px;
}
.el-form .information-btn {
  margin-left: -20px;
  padding: 8px 0px 8px 30px;
}
.roomUpdate-content {
  background-color: white;
  padding:0 20px;
  position: relative;
  /*头部切换导航样式*/
  .el-tabs__item {
    height: 74px;
    line-height: 74px;
  }
  .el-tabs__item.is-active {
    color: #45a2ff;
  }
  .el-tabs__item:hover {
    color: #45a2ff;
  }
}

</style>
